import React, { useEffect, useState, Fragment } from "react";
import {
    Button,
    Modal,
    Spin,
} from "antd";
import moment from 'moment';
import request from "@/utils/request";
import { ProDescriptions } from '@ant-design/pro-components';
import cmdbres from "@/data/cmdbres";
import hcpUtils from "@/utils/hcpUtils";

const DeltailsModal = (props) => {

    const { visible, setVisible, info } = props;

    const [columns, setColumns] = useState([]);
    const [dataSource, setDataSource] = useState({});
    const [fieldsEnum, setFieldsEnum] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (visible) {
            queryTableHeaders();
        }
    }, [visible])

    const queryTableHeaders = async () => {
        setLoading(true);
        const res = await request({
            ...cmdbres.queryTableHeader,
            params: {
                cm_module_id: info.cm_module_id
            },
        });
        setLoading(false);
        enumTranslate(info)
        setDataSource(info);
        if (res && res.code == 200) {
            const fieldData = res.data;
            const checkedArrs = [];
            let enumValues = {};
            fieldData.fields.map((item, index) => {
                let field = {
                    ...item,
                    key: item.propertyKey,
                    title: item.propertyName,
                    dataIndex: item.propertyKey,
                    width: 130,
                    copyable: true,
                    ellipsis: true,
                };

                if(['date', 'datetime'].includes(item.propertyType)) {
                    const formString = item.propertyType == 'date' ? 'YYYY-MM-DD': 'YYYY-MM-DD HH:mm:ss';
                    field.render =  (text, record) => hcpUtils.timeConversion(text, formString)
                }

                if (item.propertyType == "enum" && field.woIsHidden === 0) {
                    let enumValueStr = item.propertyEnumValue.replace(/'/g, "\"");
                    enumValues[field.key] = JSON.parse(enumValueStr);
                }
                setFieldsEnum(enumValues);

                if (field.woIsHidden === 0) {
                    field['ellipsis'] = true;   //是否自动缩略
                    field['copyable'] = false;  //是否支持复制
                    checkedArrs.push(field);
                }
            });
            setColumns(checkedArrs);
        } else {
            setColumns([]);
        }
    }

    const enumTranslate = (data) => {
        for (let fieldKey in data) {
            if (fieldsEnum[fieldKey]) {
                let enumValue = fieldsEnum[fieldKey];
                const translateState = enumValue[data[fieldKey]];
                if (translateState) {
                    data[fieldKey] = enumValue[data[fieldKey]];
                }
            }
        }
    }

    return (
        <Modal
            title="查看详情"
            visible={visible}
            footer={null}
            destroyOnClose
            onCancel={() => { setVisible(false) }}
            className="hcp-modal-lg"
            maskClosable={false}
        >
            <Spin spinning={loading}>
                <ProDescriptions
                    dataSource={dataSource}
                    columns={columns}
                    style={{ padding: "20px" }}
                >
                </ProDescriptions>
            </Spin>
            <div className="hcp-modal-body-footer">
                <Button onClick={() => { setVisible(false) }} type="primary">确定</Button>
            </div>
        </Modal>
    )
}

export default DeltailsModal;